<template>
	<view class="container">

		<view class="user-head" @click="pickHead">
			<image :src="imageUrl"></image>
		</view>
		<view class="user-changeHead">
			更换头像
		</view>
		<view class="user-form ">
			<uni-forms ref="baseForm" :modelValue="userDetail">
				<uni-forms-item label="用户姓名">
					<uni-easyinput v-model="userDetail.name" placeholder="请输入用户姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系方式">
					<uni-easyinput v-model="userDetail.phone" placeholder="请输入联系方式" />
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="userDetail.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="生日">
					<uni-datetime-picker type="date" return-type="string" v-model="userDetail.birthday" />
				</uni-forms-item>
				<uni-forms-item label="身份证号码">
					<uni-easyinput v-model="userDetail.idNumber" placeholder="请输入身份证" />
				</uni-forms-item>
				<button @click="submit"> 确认修改</button>
			</uni-forms>
		</view>



	</view>
</template>

<script>
	import {
		getUserById,
		updateUser
	} from '../../api/user'

	import {
		baseUrl
	} from '../../config'
	export default {
		data() {
			return {
				userDetail: {},
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 0
				}],
				imageName:"",
				imageUrl:""
			}
		},
		methods: {
			submit() {
				var _this=this
				var image=_this.userDetail.image
				console.log(image);
				var params = {...this.userDetail,image:this.imageName}
				updateUser(params).then(res => {
					console.log(res);
					this.init(uni.getStorageSync('auth'))
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.data,
							icon: "success"
						})
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:"修改失败",
							icon: "error",
							duration:2000
						})
					}

				})
			},
			init(id){
				var _this=this
				getUserById(id).then(res => {
					console.log(res);
					_this.imageUrl=baseUrl + "/common/download?name=" + res.data.data.image
					_this.imageName=res.data.data.image
					_this.userDetail = res.data.data
				})
			},
			pickHead(){
				var _this = this
				wx.chooseMessageFile({
				    count: 1, 
				    type: 'file',
				    success (res) {
				        // tempFilePath可以作为img标签的src属性显示图片
				        console.log(res);
				        const tempFilePaths = res.tempFiles[0].path
				        let filename = res.tempFiles[0].name; //用于页面显示的名字
				        // 这一步判断可以省略，如果需求没有格式要求的话
				        console.log("开始上传")
				
				        wx.uploadFile({
				            url: baseUrl+'/common/upload',   //上传的路径
				            filePath: tempFilePaths, //刚刚在data保存的文件路径
				            name: 'file',   //后台获取的凭据
				            fileName:filename,
				            success(res1) { 
				                console.log(JSON.parse(res1.data).data);
				                _this.imageName = JSON.parse(res1.data).data
				                _this.imageUrl = baseUrl+"/common/download?name="+JSON.parse(res1.data).data
								console.log(_this.imageUrl);
								
				            }
				        })
				        console.log('上传到服务器')
				    }
				
				})
				console.log('上传到服务器')
			}
		},
		onLoad() {
			var id = uni.getStorageSync('auth')
			this.init(id)
		}
	}
</script>

<style>
	.container {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		flex-wrap: wrap;
	}

	.user-head {
		width: 16vh;
		height: 16vh;

	}

	.user-head image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.user-changeHead {
		width: 100%;
		text-align: center;
		color: orange;
		font-size: 2.5vh;
		margin-top: 1vh;
	}

	.user-form {
		margin-top: 2vh;
		width: 100%;
	}

	form {
		width: 100%;
	}

	.uni-forms {
		display: flex;
		width: 100%;
	}

	.uni-forms-item {
		width: 100%;
	}

	.uni-forms-item__label {
		flex: 0 0 10vh;
	}

	.uni-forms-item__content {
		flex: 1;
	}

	button {
		background-color: aquamarine;
		letter-spacing: 1vh;
	}
</style>